import ProForm, { DrawerForm, ProFormInstance } from '@ant-design/pro-form';
import { Descriptions, Divider, Typography } from 'antd';
import 'dayjs/locale/zh-cn';
import React, { useRef } from 'react';

interface DetailsDouyinProps {
  task: PromotionData.TaskDetails;
  statistics: boolean;
}

const DetailsDouyin: React.FC<DetailsDouyinProps> = ({ task, statistics }) => {
  const restFormRef = useRef<ProFormInstance>();

  return (
    <DrawerForm
      key="details_promotion_task_drawer_form_gongzhonghao"
      formRef={restFormRef}
      title={<>{task.name}</>}
      drawerProps={{
        destroyOnClose: true,
      }}
      trigger={<a>{task.name}</a>}
      submitter={false}
    >
      <ProForm.Group title={'任务内容'}>
        <Descriptions>
          <Descriptions.Item label="标题">{task?.name}</Descriptions.Item>
        </Descriptions>

        {statistics && (
          <>
            <Typography.Paragraph>
              <blockquote>{task?.route}</blockquote>
            </Typography.Paragraph>
            <Descriptions>
              <Descriptions.Item label="是否复制到剪贴板">
                {task?.isDemandShare === 0 ? '否' : '是'}
              </Descriptions.Item>
            </Descriptions>
          </>
        )}

        {task?.remarks !== undefined && task.remarks !== null && (
          <Descriptions>
            <Descriptions.Item label="备注">{task?.remarks}</Descriptions.Item>
          </Descriptions>
        )}
      </ProForm.Group>
      {statistics && (
        <>
          <Divider />
          <ProForm.Group title={'统计数据'}></ProForm.Group>
          <Descriptions>
            <Descriptions.Item label="参与">{task?.statisticJoinCount}</Descriptions.Item>
          </Descriptions>
          <Descriptions>
            <Descriptions.Item label="执行">{task?.statisticExecuteCount}</Descriptions.Item>
          </Descriptions>
        </>
      )}
    </DrawerForm>
  );
};
export default DetailsDouyin;
